<template>
    <V3Echarts :width="width" :height="height" :options="option" container="container3" />
</template>

<script lang="ts" setup>
import { AXIS_LABEL, LINE_TOOLTIP, XAXIS_NAME } from '../chartConfig'
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Object,
        default: () => {
            return {
                yUnit: '辆',
                xUnit: '',
                xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
                value: [
                    {
                        name: '入园',
                        data: [47.9, 55.2, 61.2, 68.3, 79.5, 82, 88.44]
                    }
                ]
            }
        }
    },
    color: {
        type: Array,
        default: () => {
            return ['#56b0f8', '#e5e3a8', '#f5f7ff', '#d57f57']
        }
    },
    width: {
        type: Number,
        default: 800
    },
    height: {
        type: Number,
        default: 400
    },
    splitNumber: {
        type: Number,
        default: 5
    },
    dataZoom: {
        type: Boolean,
        default: false
    }
})
let option: any = ref({})

const initChart = () => {
    const series: any = []
    props.chartData.value.forEach((item: any) => {
        series.push({
            name: '注册总量',
            type: 'line',
            smooth: true, //是否平滑曲线显示
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                color: '#00f7ff' // 线条颜色
            },
            label: {
                show: true,
                position: 'top',
                fontFamily: 'OPPOSans',
                color: '#fff',
                fontSize: 14
            },
            itemStyle: {
                color: '#fff',
                borderColor: '#fff',
                borderWidth: 1,
                shadowColor: '#d8e5f6',
                shadowBlur: 10
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: '#2b5264'
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(28,55,67,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'transparent'
                        }
                    ],
                    false
                )
            },
            data: item.data
        })
    })
    option.value = {
        tooltip: LINE_TOOLTIP,
        color: props.color,

        grid: {
            top: '15%',
            left: '5%',
            right: '10%',
            bottom: props.dataZoom ? '15%' : '0%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.chartData.xAxis,
            boundaryGap: true,
            axisLabel: AXIS_LABEL,
            axisLine: {
                show: true
            },
            splitLine: {
                show: false //隐藏或显示
            },
            name: props.chartData.xUnit,
            nameGap: 5,
            nameLocation: 'end',
            splitNumber: props.splitNumber,
            nameTextStyle: XAXIS_NAME
        },
        dataZoom: [
            {
                show: props.dataZoom,
                start: 0,
                end: 100,
                bottom: '10%',
                height: 10
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: props.chartData.yUnit,
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                nameLocation: 'end',
                splitNumber: props.splitNumber,
                nameTextStyle: {
                    fontSize: 14,
                    color: 'rgba(255,255,255,0.5)',
                    align: 'left',
                    verticalAlign: 'bottom',
                    padding: [0, 0, 0, 0]
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                }
            }
        ],
        series: series
    }
}

watch(
    () => props,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>
